import { IRouteComponentProps, useSelector, useDispatch, Link } from 'umi'
import { useEffect, useState } from 'react'
import styles from './detail.less'
import moment from 'moment'
import { Child } from '../../utils/interface'
import {IknowledgeListItem} from '../../utils/interface'
import '../../static/font_n0018mswcz/iconfont.css'
import classnames from 'classnames';
import Istate from '@/models/type'

const Detail: React.FC<IRouteComponentProps> = (props) => {
  moment.locale('zh-cn')
  console.log(props)
  let id = props.match.params.id
  let { list } = useSelector((state:Istate) => state.knowledgeDetail)
  let { knowledgeList } = useSelector((state:Istate) => state.knowledge)
  const {isSun} = useSelector(
    (state:Istate) => state.RecommendedReading,
  );
  let dispatch = useDispatch()
  console.log(knowledgeList, list,isSun)
  useEffect(() => {
    dispatch({
      type: 'knowledgeDetail/getDetail',
      payload: id
    })
    dispatch({
      type: 'knowledge/getKnowledgeList',
      payload: {
        page: 1,
        pageSize: 12,
        status: "publish"
      }
    })
  }, [])

  return <div className={styles.detail}>
    <div className={isSun?styles.bgImg:styles.bgImg1} style={{backgroundImage:`linear-gradient(to bottom, rgba(255,255,255, 0), rgba(255,255,255, 1)), url(${list.cover})`,backgroundRepeat: 'no-repeat',backgroundSize: 'cover',filter: 'blur(17px)'}}>
      <div className={isSun?styles.shade:classnames(styles.shade,styles.active)}></div>
    </div>
    <div className={styles.container}>
      <div className={styles.title}>
        <p><Link to='/knowledge'>知识小册</Link>  /  {list.title}</p>
      </div>
      <div className={styles.content}>
        <div className={styles.conLeft}>
          <h3 className={styles.leftTitle}>{list.title}</h3>
          <div className={styles.leftContent}>
            <div className={styles.img}>
              <img src={list.cover} alt="" />
            </div>
            <div className={styles.describe}>
              <h3>{list.title}</h3>
              <p>{list.summary}</p>
              <p>{list.views}  次阅读  ·  {moment(`${list.createAt}`).utcOffset(8).format(`YYYY-MM-DD HH:mm:ss`)}</p>
              <div className={styles.btn}>
                <button>开始阅读</button>
              </div>
            </div>
            <div className={styles.leftList}>
              {
                list.children && list.children.map((item: Child) => {
                  return <li className={styles.leftListItem} key={item.id}>
                    <Link to={`${props.location.pathname}/${item.id}`}>{item.title}</Link>
                  </li>
                })
              }
            </div>
          </div>
        </div>
        <div className={styles.conRight}>
          <h3 className={styles.rightTitle}>其他知识笔记</h3>
          <div className={styles.rightContent}>
            {
              knowledgeList.map((item:IknowledgeListItem) => {
                if(item.id != list.id){
                  return <div className={styles.rightList} key={item.id}>
                    <h3>{item.title}  <span>&nbsp;&nbsp;{moment(item.createAt, "YYYY-MM-DDTHH:mm:ss.sssZ").fromNow()}</span></h3>
                    <div className={styles.rightListCon}>
                      <div className={styles.rightImg}>
                        <img src={item.cover} alt=""/>
                      </div>
                      <div className={styles.rightListTitle}>
                        <p>{item.summary}</p>
                        <div>
                          <span><span className="iconfont icon-chakan">  {item.views}</span>  ·  <span className="iconfont icon-fenxiang">  分享</span></span>
                        </div>
                      </div>
                    </div>
                  </div>
                }
              })
            }
          </div>
        </div>
      </div>
    </div>
  </div>
}
export default Detail